/*
* 阔地教育科技有限公司版权所有（codyy.com/codyy.cn）.
* Copyright (c) 2019, Codyy and/or its affiliates. All rights reserved.
* @Date: 2020.01.02 11:28.
* @Author
* @Description home 首页 组件
**/
<template>
    <div :class="getName">
      
        <!-- home - banner -->
        <el-carousel class="h-banner"  ref="bannerStyle" :height="ImgHeight" indicator-position="outside">
          <el-carousel-item :key="item.id" v-for="item in list">
            <img :src="item.src"  @click="handleUrlClick(item)" ref="imgSize" />
          </el-carousel-item>
        </el-carousel>
        <!-- home - 内容区域 -->
        <article class="h-content" v-if="terminal === 'pc'">
            <!-- home - 内容区域 - 左侧 -->
            <aside class="fl">
              <!-- 左一 -->
              <div class="h-up" @click="handleRouterClick('introduction', 'introduction')">
                <h1>新时尚</h1>
                <div class="h-text">与生俱来的光 吸引无数仰望 你莞尔的前行 世界变不一样</div>
                <p>从此 唯你闪耀</p>
              </div>
              <!-- 左二 -->
              <div class="h-low h-hover mt10" @click="handleRouterClick('list', 'list')">
                <img src="../../assets/img/zhi-i1-2.jpg"/>
                <img class="h-pos" src="../../assets/img/zhi-i2.jpg"/>
                <div class="h-info h-pos">
                  <h2 class="pt320">至i</h2>
                  <p>时尚钻饰</p>
                  <span>(浏览)</span>
                </div>
              </div>
            </aside>
            <!-- home - 内容区域 - 右侧 -->
            <section class="fr">
                <!-- home - 内容区域 - 上 - 左 -->
                <div class="h-sec-up">
                    <div class="h-hover fl" @click="handleRouterClick('list', 'list')">
                        <img src="../../assets/img/zuanjie1-1.jpg"/>
                        <img class="h-pos" src="../../assets/img/zuanjie2.jpg"/>
                        <div class="h-info h-pos">
                            <h2 class="pt90">做自己的明星</h2>
                            <p>时尚钻饰</p>
                            <span>(浏览)</span>
                        </div>
                    </div>
                    <!-- home - 内容区域 - 上 - 右 -->
                    <div class="h-hover fr" @click="handleRouterClick('list', 'list')">
                        <img src="../../assets/img/zujin1.jpg"/>
                        <div class="h-info h-pos">
                            <h2 class="pt90">足金系列</h2>
                            <p>时尚黄金</p>
                            <span>(浏览)</span>
                        </div>
                    </div>
                </div>
                <!-- home - 内容区域 - 中 -->
                <div class="h-sec-mid h-hover mt10" @click="handleRouterClick('list', 'list')">
                  <img src="../../assets/img/next1.jpg"/>
                  <img class="h-pos" src="../../assets/img/next22.jpg"/>
                  <div class="h-info h-pos">
                      <h2 class="pt90"></h2>
                      <p></p>
                      <span></span>
                  </div>
                </div>
                <!-- home - 内容区域 - 下 -->
                <div class="h-sec-low mt10" @click="handleRouterClick('tvshow', 'tv')">
                    <img src="../../assets/img/footer.jpg"/>
                </div>
            </section>
        </article>
        <!-- home - 内容区域 - 手机端 -->
        <article class="h-content h-content-ph" v-else>
          <!-- home - 内容区域 - 左侧 -->
          <div class="h-hidden">
            <aside class="fl">
              <!-- 左一 -->
              <div class="h-up" @click="handleRouterClick('introduction', 'introduction')">
                <h1>新时尚</h1>
                <div class="h-text">与生俱来的光 吸引无数仰望 你莞尔的前行 世界变不一样</div>
                <p>从此 唯你闪耀</p>
              </div>
            </aside>
            <!-- home - 内容区域 - 右侧 -->
            <section class="h-section-ph fr">
              <!-- home - 内容区域 - 上 - 左 -->
              <div class="pc-w100" @click="handleRouterClick('list', 'list')">
                <img src="../../assets/img/zuanjie1-1.jpg"/>
              </div>
                <!-- home - 内容区域 - 上 - 右 -->
              <div class="pc-w100 mt5" @click="handleRouterClick('list', 'list')">
                <img src="../../assets/img/zujin1.jpg"/>
              </div>
            </section>
          </div>
          <!-- home - 内容区域 - 中 -->
          <div class="h-mid mt10" @click="handleRouterClick('list', 'list')">
            <img src="../../assets/img/next1.jpg"/>
          </div>
          <!-- 左二 -->
          <div class="h-low mt10" @click="handleRouterClick('list', 'list')">
            <img src="../../assets/img/zhi-i1-2.jpg"/>
          </div>
          <!-- home - 内容区域 - 下 TVC 视频入口 -->
          <div class="mt10" @click="handleRouterClick('tvshow', 'tv')">
            <img src="../../assets/img/footer.jpg"/>
          </div>
        </article>
        <img @load="ImgOn" :src="getSrc" v-if="imgshow" ref="imgGetsrc"> 
    </div>
</template>

<script>
import { bannerData, contentData } from '@/api' // banner、 content区域内容
import {  contentList } from '@/mock' // 导航数据、content数据

export default {
  name: 'home',
  data () {
    return {
      list: [], // banner
      mainList: [], // content
      terminal: '', // 终端类型
      getSrc : '',
      ImgHeight: '',
      imgshow:true
    }
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-pc'
      } else {
        return 'h-ph'
      }
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
     this.getBannerData()
    // this.getContentData()
  },
  mounted () {
    // eslint-disable-next-line no-debugger
    // debugger
    
    // this.ImgHeight = this.$refs.bannerStyle.$el.clientWidth*(496/1064) + 'px'
    // console.log(this.$refs.bannerStyle.$el.clientWidth)
    // console.log(this.ImgHeight)
    // this.list = bannerList.result;
    this.mainList = contentList.result
  },
  beforeMount() {

  },
  methods: {
    ImgOn(e) {
      // eslint-disable-next-line no-debugger
      // debugger
      var h=this.$refs.imgGetsrc.clientHeight
      var w=this.$refs.imgGetsrc.clientWidth
      this.imgshow=false
      //if(this.terminal ==="pc"){
        console.log(this.$refs.imgGetsrc.clientWidth, this.$refs.imgGetsrc.clientHeight)
        this.ImgHeight = this.$refs.bannerStyle.$el.clientWidth*(h/w) + 'px'
      //}
      console.log(e)
      
    },
    imgload () {
      // eslint-disable-next-line no-debugger
      // debugger
      // this.$nextTick(function(){
      //   // eslint-disable-next-line no-debugger
      //   debugger
      //   console.log(this.$refs)
      //   console.log(this.$refs.imgSize)
        
      // })
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getBannerData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      bannerData(params).then(res => {
        console.log(res);
        this.list = res
        this.getSrc =res[0].src
        // this.imgload()
      }).catch((e) => {console.log(e)})
    },
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getContentData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      contentData(params).then(res => {
        this.mainList = res
      })
    },
    handleUrlClick(item){
       if(item.url !== undefined && item.url !=="")
      {
        window.open(item.url,'_blank') // 新窗口打开外链接
      }
      else
      {
      this.$router.push({ name: item.router, params: { id: item.id } })
      }
    },
    /**
     *@Description
     *@Param
     *@Return 点击跳转路由.
     **/
    handleRouterClick (item, type) {
      switch(type){
        case 'introduction': // 新时尚 路由
          this.$router.push({ name: 'introduction', params: { id: item.id } })
        break;
        case 'list': // 做自己的明星 路由
          this.$router.push({ name: 'list', params: { id: item.id } })
        break;
        case 'tv':
          this.$router.push({ name: 'tvshow', params: { id: item.id } })
        break;
      }
    },
  }
}
</script>
<style lang="scss" scoped>
// .h-pc {
//   .h-banner{
//     margin-top: 68px;
//   }
// }
  .h-banner {
    width: 100%;
    position: relative;
    // height: 500px;
    /deep/ .el-carousel__container {
        height: 100%;
    }
    /deep/ ul {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin-left: -50%;
    }
    img {
        width: 100%;
        height: 100%;
    }
  }
  .h-content {
    font-family: "宋体";
    overflow: hidden;
    margin: 15px 0;
    color: #fff;
    img {
        width: 100%;
        height: 100%;
    }
    /* 左侧 */
    aside {
        width: 280px;
        .h-up {
            position: relative;
            width: 100%;
            height: 200px;
            padding-top: 110px;
            cursor: pointer;
            text-align: center;
            background: #900028;
            h1, p {
                position: absolute;
                left: 50%;
                width: 154px;
                margin-left: -77px;
                transition: all 0.5s;
                background: #900028;
            }
            h1 {
                font-size: 34px;
                line-height: 80px;
                z-index: 1;
                top: 84px;
                height: 80px;
                border-top: 10px solid #fff;
            }
            p {
                font-size: 14px;
                line-height: 40px;
                z-index: 2;
                bottom: 90px;
                padding-top: 10px;
                border-top: 2px solid #fff;
            }
            .h-text {
                line-height: 25px;
                width: 85px;
                margin: 0 auto;
            }
            &:hover {
                h1 {
                    top: 20px;
                }
                p {
                    bottom: 40px;
                }
            }
        }
        .h-low {
            overflow: hidden;
            height: 460px;
        }
    }
      /* 鼠标移入样式提取 */
      .h-hover {
          position: relative;
          cursor: pointer;
          &:hover {
              .h-pos {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
              }
          }
      }
      /* 浮层样式提取 */
      .h-info {
          text-align: center;
          opacity: 0.9;
          background: rgba(0, 0, 0, 0.6);
          h2 {
              font-size: 25px;
              padding-bottom: 20px;
          }
          p {
              font-size: 18px;
              margin-bottom: 8px;
          }
          span {
              font-size: 12px;
              opacity: 0.8;
          }
      }
      /* 右侧 */
      section {
        width: 750px;
      }
      /* 右侧 上 中 下 三部分 区域样式 */
      .h-sec-up {
          overflow: hidden;
          .h-hover {
              position: relative;
              overflow: hidden;
              width: 363px;
              height: 252px;
          }
      }
      .h-sec-mid {
          overflow: hidden;
          height: 320px;
      }
      .h-sec-low {
          height: 190px;
          cursor: pointer;
      }
  }
/* 移动端 */
.h-ph{
  // .h-banner{
  //   height: 190px;
  // }
  .h-content-ph{
    .fl{
      height: 291px;
    }
    /* 左侧、右侧 */
    aside, section{
      width: calc(50% - 2px);
    }
    .h-section-ph{
      .pc-w100{
        width: 100%;
        height: 143px;
      }
    }
  }
  
}
</style>